<template>
  <!-- 大盒子 -->
  <div class="song-box">
    <!-- 中间小框居中 -->
    <div class="song-box1" v-if="userlist.profile">
      
      <!--  第一块 -->
      <div class="song-top">
        <!-- 图片 -->
        <img :src="userlist.profile.avatarUrl" alt="" />
        <!-- 右边 -->
        <div class="song-rig">
          <!--右边第一块头部 -->
          <div class="sr-top1">
            <!--第一块头部左边 -->
            <div class="sr-top-l">
              <div class="sr1">
                <span class="sp1">{{userlist.profile.artistName}}</span>
                <span class="sp2"><span>{{userlist.level}}</span><i></i></span>
                <span class="sp3"><span>发私信</span></span>
                <span class="sp4"> <span>关注</span></span>
              </div>
              <div class="sr2">
                <span class="icon1"></span>
                <span class="itext">{{userlist.profile.description}}</span>
              </div>
            </div>
            <!--第一块头部右边 -->
            <div class="sr-top-r">
              <a class="looksing" @click="goartist(userlist.profile.artistId)"><i>查看歌手</i></a>
            </div>
          </div>
          <!-- 第二块 -->
          <div class="sr-bom">
            <a class="nospn srbom1"
              ><span class="spn1">{{userlist.profile.eventCount}}</span> <span>动态</span></a
            >
            <a class="srbom1"><span class="spn1">{{userlist.profile.newFollows}}</span> <span>关注</span></a>
            <a class="srbom1"
              ><span class="spn1">{{userlist.profile.followeds}}</span> <span>粉丝</span></a
            >
          </div>
          <!-- 第三快 -->
          
        </div>
      </div>

      <!-- 第二块~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
      <!-- 歌曲列表 -->
      <!-- <div class="pl-btn">
        <div class="pl-btn-top">
          <span class="pl-btn-t"
            >听歌排行
            <p>累计听歌{{ 5 }}首</p></span
          >
          <div class="pl-btn-r">
            <span class="btn-tp">最近一周</span>
            <span class="btn-tp1">|</span>
            <span class="btn-tp">
              所有时间

            </span>
          </div>
        </div>

        文字
        <div class="m-text">
          <div class="t1 t2">
            <span>{{ 1 }}</span>
            <i
              class="t1-span"
              @click="playMusic(trackList.id, trackList.al.picUrl)"
            ></i>
          </div>

          <div class="t1">
            <a> 命中注定{{ 1 }}- </a><a class="a1">孙楠</a>
          </div>

          <div class="t1">
            <a>{{ 1 }}</a>
          </div>
        </div>
      </div>  -->

 

     
      <!-- 第四块 -->
      <div class="pl-btn" v-if="playlist">
        <div class="pl-btn-top">
          <span class="pl-btn-t">{{userlist.profile.artistName}}创建的歌单({{userlist.profile.playlistCount}})</span>
        </div>

        <!-- 图片专区 -->
        <ul class="center_ul" >
          <li class="center_li" v-for="play in playlist" :key="play.id" @click="goplaylists(play.id)">
            <div class="b_img">
              <a> <img v-lazy="play.coverImgUrl" /></a>

              <div class="button">
                <span class="icon-l"></span>
                <span class="nb"
                  >{{ play.playCount >10000 ? (play.playCount / 10000).toFixed(1) +'万' : play.playCount  }}</span
                >
                <a href="javascript:;" class="icon-play"></a>
              </div>
            </div>
            <div class="b_text">
              <a> {{ play.name }} </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import Leftarea from "./Leftarea";
// import Rightarea from "./Rightarea";
export default {
  data() {
    return {
        id:this.$route.query.id,
        playlist:[],
        userlist:{},
        userdjlist:{}
    }
  },
  mounted() {
    this.getUserPlayList(),
    this.getUserDetail(),
    this.getUserDj()
  },
  methods: {
    // 必选参数 : uid : 用户 id
    //     limit : 返回数量 , 默认为 30
    // offset : 偏移数量，用于分页 , 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
    // 接口地址 : /user/playlist
    // 获取歌单reqUserPlayList

    async getUserPlayList() {
      const red = {
        uid:this.id,
        limit:30,
        offset:0
      }
      const result = await this.$API.reqUserPlayList(red);
      console.log(result)
      if(result.code == 200){
        this.playlist = result.playlist ||[]
      }else{
        this.$msg.error("获取喜欢列表失败")
      }
    },

    // 获取歌手详情信息reqUserDetail
    async getUserDetail(){
       const result = await this.$API.reqUserDetail(this.id);
      // console.log(result)
      if(result.code == 200){
        this.userlist = result ||{}
      }else{
        this.$msg.error("获取歌手信息失败")
      }
    },

    // reqUserDj 获取电台
    async getUserDj(){
       const result = await this.$API.reqUserDj(this.id);
      console.log(result)
      if(result.code == 200){
        this.userdjlist = result ||{}
      }else{
        this.$msg.error("获取歌手电台失败")
      }
    },
    // 去主页
    goartist(id){
      this.$router.push(`/artist?id=${id}`)
    },
    // 去歌单
    goplaylists(id){
      this.$router.push(`playlists?id=${id}`)
    }
  },
};
</script>

<style lang="less" scoped>
.song-box {
  width: 984px;
  // height: 400px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  .song-box1 {
    width: 900px;
    margin: 0 auto;
    padding-top: 45px;
    min-height: 400px;
  }
  // 第一块
  .song-top {
    display: flex;
    img {
      padding: 2px;
      border: solid 1px #666;
      width: 180px;
      height: 180px;
    }
    .song-rig {
      width: 670px;
      margin-left: 20px;
      .sr-top1 {
        border-bottom: rgb(221, 221, 221) 1px solid;
        display: flex;
        padding-bottom: 20px;
        justify-content: space-between;
        .sr-top-l {
          .sr1 {
            display: flex;
            align-items: flex-end;
            .sp1 {
              font-size: 20px;
              font-weight: bold;
            }
            .sp2 {
              display: flex;
              height: 19px;
              /* overflow: hidden; */
              padding-left: 32px;
              line-height: 19px;
              margin-left: 10px;
              font-style: italic;
              color: #e03a24;
              background-position: -135px -190px;
              background-image: url("~@/assets/image/icon2.png");
              span {
                font-size: 14px;
                margin-right: 4px;
              }
              i {
                display: inline-block;
                width: 9px;
                height: 19px;
                background-position: -191px -190px;
                background-image: url("~@/assets/image/icon2.png");
              }
            }
            .sp3 {
              display: inline-block;
              width: 75px;
              text-align: end;
              line-height: 31px;
              margin-left: 15px;
              height: 31px;
              font-size: 14px;
              background-position: 0 -810px;
              background-image: url("~@/assets/image/button.png");

              span {
                margin-right: 3px;
              }
            }
            .sp4 {
              display: inline-block;
              width: 75px;
              text-align: center;
              line-height: 31px;
              margin-left: 10px;
              font-size: 14px;
              height: 31px;
              background-position: 0 -720px;
              background-image: url("~@/assets/image/button.png");
              span {
                margin-left: 10px;
              }
            }
          }
          .sr2 {
            margin-top: 20px;
            display: flex;
            align-items: flex-end;
            .icon1 {
              background-position: 0 -480px;
              display: inline-block;
              width: 68px;
              height: 20px;
              background-image: url("~@/assets/image/icon2.png");
            }
            .itext {
              margin-left: 5px;
            }
          }
        }
        .sr-top-r {
          .looksing {
            display: inline-block;
            color: #333;
            margin-right: 10px;
            width: 75px;
            background-position: right -182px;
            background-image: url("~@/assets/image/button2.png");
            height: 31px;
            line-height: 31px;
            font-size: 14px;
            text-align: center;
            i {
              width: 74px;
              display: inline-block;
              background-position: 0 -59px;
              background-image: url("~@/assets/image/button2.png");
            }
          }
        }
      }
      // 第二块
      .sr-bom {
        display: flex;
        margin-top: 10px;
        // flex-direction:column;

        .srbom1 {
          display: flex;
          flex-direction: column;
          text-align: flex-start;
          width: 100px;
          border-left: rgb(221, 221, 221) 1px solid;
          color: #666666;
          padding-left: 30px;
          .spn1 {
            font-size: 24px;
          }
          span {
            font-size: 12px;
          }
        }
        .nospn {
          padding-left: 0;
          border-left: none;
        }
      }
      // 第三快
      .sr-bom3 {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
      }
    }
  }
  // 第二块
  .pl-btn {
    // 歌词列表
    .pl-btn-top {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2px red;
      padding-bottom: 5px;
      .pl-btn-t {
        font-size: 20px;
        display: flex;
        align-items: flex-end;
        p {
          display: inline;
          margin-left: 10px;
          font-size: 12px;
        }
      }

      .pl-btn-r {
        display: flex;
        align-items: flex-end;

        a {
          color: #4996d1;
          font-size: 12px;
        }
        .btn-tp1 {
          margin: auto 10px;
          height: 5px;
          font-size: 10px;
          display: inline-block;
        }
        .btn-tp {
          color: #666;
          // margin-left: 20px;
          // margin: auto 10px;
          display: flex;
          font-size: 12px;
          p {
            color: #c20c0c;
            font-weight: bold;
            display: block;
          }
        }
      }
    }
    // 表格
    .m-table {
      width: 100%;
      display: grid;
      // grid-template-columns :repeat(auto-fill,);
      height: 35px;
      background-color: rgb(248, 248, 248);
      // grid布局
      grid-template-columns: 74px auto 111px 14% 20%;
      border: solid 1px rgb(216, 216, 216);
      .w2 {
        // border: solid 1px rgb(216, 216, 216);
        border-right: 1px solid rgb(216, 216, 216);
        span {
          font-size: 12px;
          color: #666;
          display: inline;
          margin-left: 5px;
        }
      }
      .s1 {
        border-right: none;
      }
    }
    // 歌单列
    .m-text {
      width: 100%;
      display: grid;
      font-size: 12px;
      // grid-template-columns :repeat(auto-fill,);
      height: 35px;
      background-color: rgb(247, 247, 247);
      // grid布局
      border: solid 1px rgb(216, 216, 216);
      grid-template-columns: 74px auto 30%;
      align-items: center;
      a {
        color: rgb(27, 25, 25);
      }
      .t1 {
        margin-left: 10px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-weight: bold;
        .a1 {
          font-weight: 400;
          color: #666;
        }
        .t1-a1 {
          .t1-as {
            width: 75px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }
      }

      .t2 {
        display: flex;
        justify-content: space-between;
        .t1-span {
          display: inline-block;
          margin-right: 10px;
          width: 17px;
          height: 17px;
          cursor: pointer;
          background-position: 0 -103px;
          background-image: url("~@/assets/image/table.png");
        }
      }
    }
    .m-text:nth-child(2n + 1) {
      background-color: rgb(255, 255, 255);
    }
  }
}
.center_ul {
  padding-top: 10px;
  flex-wrap: wrap;
  // justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  margin: 0 auto;
  display: flex;

  .center_li {
    width: 20%;
    height: 204px;

    .b_img {
      position: relative;
      width: 78%;
      .ico {
        display: inline-block;
        position: absolute;
        background: url("~@/assets/image/icon2.png");
        width: 40px;
        height: 40px;
        background-position: -135px -220px;
        top: 0;
        left: 0;
        z-index: 999;
      }
      img {
        width: 140px;
        height: 140px;
      }

      .button {
        position: absolute;
        //   position: relative;
        background: url("~@/assets/image/coverall.png");
        background-position: 0 -537px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 27px;
        width: 100%;
        bottom: 3px;
        //   background: url("~@/assets/image/iconall.png");
        // top: -27px;
        color: #ccc;

        a {
          background: url("~@/assets/image/iconall.png");
          display: inline-block;
          position: absolute;
          right: 10px;
          bottom: 9px;
          width: 16px;
          height: 16px;
          background-position: 0 0;
        }
        a:hover {
          // color: rgb(255, 255, 255);
          background-position: 0 -60px;
        }
        .icon-l {
          // float: left;
          display: inline-block;
          background: url("~@/assets/image/iconall.png");
          width: 14px;
          height: 11px;
          background-position: 0 -24px;
          margin: 9px 5px 9px 10px;
        }
        .nb {
          display: inline-block;
          margin-right: 60px;
          font-size: 10px;
        }
      }
    }
    .b_text {
      width: 78%;
      a {
        font-size: 10px;
        line-height: 0;
        color: #000;
      }
    }
  }
}
</style>
